<template>
  <div class="popularList">
    <div class="popularList-left">
      <img class="mp-title-img" src="https://imgs.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png">
      本周热门榜单
    </div>
    <div class="popularList-right">
      全部榜单
      <span class="iconfont">&#xe637;</span>
    </div>
    <div class="popularList-cont">
      <ul>
        <li v-for="item of list" :key="item.id">
          <a href="#">
            <div class="popularList-cont-smollImg">
              <img :src="item.smollImg">
            </div>
            <div class="popularList-cont-img">
              <img :src="item.imgUrl">
            </div>
            <div class="popularList-cont-text">{{item.city}}</div>
            <div>
              <span class="textColor1">{{item.money}}</span>
              <span class="textColor2">起</span>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeAllList',
  props: {
    list: Array
  },
  data () {
    return {
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .popularList
    margin-top 0.2rem
    .popularList-left
      float left
      padding-left 0.2rem
      margin-bottom 0.4rem
      margin-top 0.2rem
      font-size 0.35rem
    .popularList-left
      img
        width 0.3rem
        height 0.3rem
        margin-bottom 0.1rem
    .popularList-right
      float right
      padding-right 0.6rem
      font-size 0.2rem
      margin-top 0.3rem
    .popularList-cont
      height 0
      padding-bottom 37.5%
      clear both
      text-align center
    .popularList-cont
      ul
        overflow-x: scroll;
        white-space: nowrap;
        padding-bottom 0.25rem
    .popularList-cont
      li
        display inline-block
        margin-left 0.2rem
        position relative
      .popularList-cont-smollImg
        position absolute
        top 0
        left 0
        z-index 1
        width 0.84rem
        height 0.4rem
      .popularList-cont-smollImg
        img
          width 100%
      .popularList-cont-img
        height 2rem
        width 2rem
      .popularList-cont-img
        img
          width 100%
      .popularList-cont-text
        color black
        padding 0.1rem 0
      .textColor1
        color orange
      .textColor2
        color black
</style>
